<template>
  <view class="list-bg">
    <image class="w-full h-full" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/index-bg.png"></image>
  </view>
  <view class="channel-manage-container">
    <z-paging ref="pagingRef" v-model="dataList" :auto="false" style="z-index: 2" @query="queryMyProviderChildrenList">
      <template #top>
        <mt-navbar :show-back="true" :title="title" bg-color="none" :title-style="titleStyle"></mt-navbar>
        <view class="channel-manage-container-header px-32rpx">
          <uv-row custom-style="margin-top: 24rpx" gutter="4">
            <uv-col :span="providerType === '3' ? 6 : 4">
              <view class="item">
                <view class="flex flex-justify-between flex-items-center">
                  <text v-if="providerType === '1'" class="fw-400 text-24rpx text-#727687">邀请个数</text>
                  <text v-else class="fw-400 text-24rpx text-#727687">下级数量</text>
                  <uv-icon
                    size="28"
                    name="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-channel-manage-message.svg"
                  ></uv-icon>
                </view>
                <view class="mt-16rpx">
                  <text class="text-#1C213E text-48rpx fw-600">{{ channelTotal.childrenNum }}</text>
                </view>
              </view>
            </uv-col>
            <uv-col v-if="providerType === '1'" span="4">
              <view class="item">
                <view class="flex flex-justify-between flex-items-center">
                  <text class="fw-400 text-24rpx text-#727687">提供线索</text>
                  <uv-icon size="28" name="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-my-posted-it.svg"></uv-icon>
                </view>
                <view class="mt-16rpx">
                  <text class="text-#1C213E text-48rpx fw-600">{{ channelTotal.clueNumForMe }}</text>
                </view>
              </view>
            </uv-col>
            <uv-col :span="providerType === '3' ? 6 : 4">
              <view class="item">
                <view class="flex flex-justify-between flex-items-center">
                  <text class="fw-400 text-24rpx text-#727687">成交线索</text>
                  <uv-icon
                    size="28"
                    name="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-channel-manage-money.svg"
                  ></uv-icon>
                </view>
                <view class="mt-16rpx">
                  <text v-if="providerType === '1'" class="text-#1C213E text-48rpx fw-600">{{ channelTotal.clueDealNumForMe }}</text>
                  <text v-else class="text-#1C213E text-48rpx fw-600">{{ channelTotal.dealNum }}</text>
                </view>
              </view>
            </uv-col>
          </uv-row>
          <view class="income mt-8rpx mb-24rpx">
            <view class="income-content flex flex-justify-between flex-items-center">
              <text v-if="providerType === '1'" class="fw-400 text-24rpx text-#727687">产生收益</text>
              <text v-else class="fw-400 text-24rpx text-#727687">总共为我返佣</text>
              <uv-icon
                size="28"
                name="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-channel-manage-wallet.svg"
              ></uv-icon>
            </view>
            <view class="px-32rpx mb-32rpx">
              <text v-if="providerType === '1'" class="text-#1C213E text-48rpx fw-600">￥{{ amountTransfer(channelTotal.clueDealAmount) }}</text>
              <text v-else class="text-#1C213E text-48rpx fw-600">￥{{ amountTransfer(channelTotal.rebateAmountForMe) }}</text>
            </view>
          </view>
        </view>
      </template>
      <!--列表数据-->
      <view v-for="(item, index) in dataList" :key="index" class="channel-manage-container-list px-32rpx mb-24rpx">
        <view class="card px-32rpx py-32rpx">
          <view class="top flex flex-justify-between flex-items-center">
            <view class="left flex flex-justify-around flex-items-center">
              <view class="avatar mr-16rpx">
                <image
                  class="w-100% h-100%"
                  style="border-radius: 50%"
                  :src="item.avatarUrl ? item.avatarUrl : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/default_avatar.png'"
                ></image>
              </view>
              <view class="flex flex-col">
                <text class="text-#1C213E text-32rpx fw-500 clamp2 w-320rpx">{{ item.providerName }}</text>
                <text class="text-#1C213E text-28rpx fw-400 mt-12rpx">{{ item.phone }}</text>
              </view>
            </view>
            <view class="right">
              <view class="city px-16rpx py-8rpx">
                <text class="text-#1C213E text-28rpx fw-400">地区：{{ item.registerZoneName }}</text>
              </view>
            </view>
          </view>
          <view class="center mt-24rpx mb-24rpx flex flex-justify-around flex-items-center py-24rpx">
            <view class="item flex flex-col flex-items-center">
              <text class="mb-16rpx text-#1C213E fw-600 text-48rpx">{{ providerType === '1' ? item.clueNumForMe : item.dealNum }}</text>
              <text v-if="providerType === '1'" class="text-#727687 fw-400 text-24rpx">提供线索</text>
              <text v-else class="text-#727687 fw-400 text-24rpx">成交线索</text>
            </view>
            <uv-line direction="col" length="24" color="#E6E6E6"></uv-line>
            <view class="item flex flex-col flex-items-center">
              <text v-if="providerType === '1'" class="mb-16rpx text-#1C213E fw-600 text-48rpx">{{ item.clueDealNumForMe }}</text>
              <text v-else class="mb-16rpx text-#EFB339 fw-600 text-48rpx">￥{{ amountTransfer(item.rebateAmountForMe) }}</text>
              <text v-if="providerType === '1'" class="text-#727687 fw-400 text-24rpx">成交线索</text>
              <text v-else class="text-#727687 fw-400 text-24rpx">为我返佣</text>
            </view>
          </view>
          <view class="footer">
            <text class="text-#727687 text-24rpx fw-400">注册于</text>
            <text class="text-#727687 text-24rpx fw-400 ml-16rpx">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</text>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script name="ChannelManage" setup>
import { getMyProviderChildrenTotalData, getMyProviderChildrenList } from '@/subChannel/api/channelManage.js';
import { amountTransfer } from '@/utils/tools';
import dayjs from 'dayjs';
import { onLoad } from '@dcloudio/uni-app';

// 渠道商类型 1.渠道商管理 3.我的下级
const providerType = ref(1);

const pagingRef = ref(null);

const title = ref('盟友管理');

const titleStyle = ref({
  'color': '#1C213E',
  'font-weight': '500',
  'font-size': '32rpx'
});

// 渠道商汇总信息
const channelTotal = ref({});
// 渠道商列表数据
const dataList = ref([]);

// 获取渠道商汇总信息 1. 渠道管理 3.我的下级
const queryProviderChildrenTotalData = async () => {
  const params = {
    providerType: providerType.value
  };
  const { data } = await getMyProviderChildrenTotalData(params);
  channelTotal.value = data;
};

const arr = ref([]);

// 获取渠道商列表数据 1.渠道管理 2.我的下级
const queryMyProviderChildrenList = async (pageNum) => {
  try {
    const params = {
      lastId: arr.value && arr.value.length > 0 && pageNum > 1 ? dataList.value[dataList.value.length - 1].providerId : undefined,
      providerType: providerType.value,
      size: 10
    };
    const res = await getMyProviderChildrenList(params);
    arr.value = res.data.items;
    pagingRef.value.complete(res.data.items);
  } catch (e) {
    pagingRef.value.complete(false);
  }
};

onLoad((detail) => {
  providerType.value = detail.type;
  if (detail.type === '1') {
    title.value = '盟友管理';
  } else {
    title.value = '我的下级';
  }
  queryProviderChildrenTotalData();
  queryMyProviderChildrenList();
});
</script>

<style lang="scss" scoped>
.list-bg {
  height: 620rpx;
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
}
.channel-manage-container {
  background-color: #f7f7f7;
  height: 100vh;
  &-header {
    .item {
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #ffffff;
      padding: 20rpx 20rpx 32rpx 32rpx;
      // background: linear-gradient(180deg, rgba(29, 138, 241, 0.001) 0%, rgb(255, 255, 255) 95%);
    }
    .income {
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #ffffff;
      // background: linear-gradient(180deg, rgba(29, 138, 241, 0.001) 0%, rgb(255, 255, 255) 95%);
      &-content {
        padding: 20rpx 20rpx 16rpx 32rpx;
      }
    }
  }
  &-list {
    .card {
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      .top {
        .left {
          .avatar {
            width: 80rpx;
            height: 80rpx;
          }
        }
        .right {
          .city {
            background: #f5f5f5;
            border-radius: 4px 4px 4px 4px;
          }
        }
      }
      .center {
        background: #f7f7f7;
        border-radius: 4px 4px 4px 4px;
      }
    }
  }
}
</style>
